<template>
	<view class="bizPage">
		<status-bar title="我的订单" />
		<view class="padding20">
			<view class="item bgwhite m-bot20" v-for="(item,index) in list" :key="index">
				<view class="title d-flex a-center" :class="{'done': item.state == 3, 'doing': item.state == 1}">
					<view class="flex-1 size28 color-222 bold">订单类型：{{ item.typeName }}</view>
					<view class="label">{{ item.stateStr }}</view>
				</view>
				<view class="content">
					<view class="d-flex m-bot20">
						<view class="size26 color-999">申请时间：</view>
						<view class="size26">{{ item.createTime }}</view>
					</view>
					<view class="d-flex m-bot20" v-if="item.content">
						<view class="size26 color-999">需求内容：</view>
						<view class="flex-1 size26">{{ item.content }}</view>
					</view>
					<view class="d-flex m-bot30">
						<view class="size26 color-999">接单律师：</view>
						<view class="flex-1 size26">{{ item.company }}/{{ item.lawyerName }}</view>
					</view>
					<view class="divider"></view>
					<view class="btn primary flexac" v-if="item.state == 1" @click="toUrl('/pages/chat/chat?chatId=' + item.id + '&orderType=' + item.orderType + '&title=' + item.typeName)">联系律师</view>
				</view>
			</view>
			
			<up-empty :show="noData" mode="order" marginTop="100"></up-empty>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { useMainStore } from '@/stores/index'
	import { toUrl, Toast } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'

	const mainStore = useMainStore()
	const list = ref([])
	const page = ref(1)
	const limit = ref(10)
	const noData = ref(false)
	const noMore = ref(false)

	onLoad(() => {
		getList()
	})
	
	const getList = () => {
		noData.value = false
		noMore.value = false
		Http.post({
			url: '/order/list',
			data: {
				pageNum: page.value,
				pageSize: limit.value,
				userId: mainStore.userInfo.userId
			},
			Typejson: false
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.rows || []
			list.value = page.value == 1 ? result : list.value.concat(result)
			if(!list.value.length) noData.value = true
			if(result.length < limit.value) noMore.value = true
		})
	}

	onReachBottom(() => {
		if(noMore.value) return
		page.value ++
		getList()
	})
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F9F9F9;
	}     
	.item {
		border-radius: 14rpx;
		overflow: hidden;
		.title {
			height: 66rpx;
			border: 1rpx solid #F5F5F5;
			padding: 0 26rpx;
			.label {
				padding: 4rpx 10rpx;
				border-radius: 7rpx;
				font-size: 22rpx;
			}
			&.done {
				background: linear-gradient(90deg, #F2FAF3, #FFFFFF);
				.label {
					background: #EAFAED;
					color: #43B55D;
				}
			}
			&.doing {
				background: linear-gradient(90deg, #EFF7FD, #FFFFFF);
				.label {
					background: #EDF5FE;
					color: #1885FF;
				}
			}
		}
		.content {
			padding: 30rpx 26rpx;
			.divider {
				height: 1rpx;
				background: #F2F2F2;
			}
			.btn {
				width: 132rpx;
				height: 48rpx;
				border-radius: 7rpx;
				margin: 30rpx auto 0;
				font-size: 24rpx;
				&.info {
					border: 1rpx solid #999999;
				}
				&.primary {
					border: 1rpx solid #1885FF;
					color: #1885FF;
				}
			}
		}
	}
</style>